<%--
  Created by IntelliJ IDEA.
  User: kagura
  Date: 2020/12/20
  Time: 5:33 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品类型列表</title>
    <!-- 引入EasyUI相关js和css文件 -->
    <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css">
    <link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css">
    <link href="EasyUI/demo/demo.css" rel="stylesheet" type="text/css">
    <script src="EasyUI/jquery.min.js" type="text/javascript"></script>
    <script src="EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body>
<table id="dg_producttype" class="easyui-datagrid"></table>
<!-- 创建Datagrid控件的工具栏，添加、修改、删除商品类别 -->
<div id="tb_producttype" style="padding: 2px 5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton"
       iconCls="icon-add" plain="true" onclick="addType();">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton"
       iconCls="icon-edit" plain="true" onclick="editType();">修改</a>
    <a href="javascript:void(0)" class="easyui-linkbutton"
       iconCls="icon-remove" plain="true" onclick="removeType();">删除</a>
</div>
<!-- 新增商品类别对话框布局 -->
<div id="dlg_producttype" class="easyui-dialog" title="添加商品" closed="true" style="width: 500px;">
    <div style="padding: 10px 60px 20px 60px">
        <form id="ff_producttype" method="POST" action="" enctype="multipart/form-data">
            <table cellpadding="5">
                <tr>
                    <td>类别名称:</td>
                    <td>
                        <input class="easyui-textbox" type="text" id="name" name="name"
                               data-options="required:true"/>
                    </td>
                </tr>
            </table>
        </form>
        <div style="text-align: center; padding: 5px;">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveType();">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm();">清空</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 获取商品类别
    $(function () {
        $('#dg_producttype').datagrid({
            singleSelect: false, // 设置datagrid为单选
            url: 'type/getAllType', // 为datagrid设置数据源
            pagination: true, // 启用分页
            pageSize: 10, //设置初始每页记录数
            pageList: [ 10, 15, 20 ], //设置可选每页显示数量大小
            rownumbers: true, //显示行号
            fit: true, //启用自适应
            toolbar: '#tb_producttype', //为datagrid添加工具栏
            columns: [[
                {  //编辑datagrid的列
                    title: '序号',
                    field: 'id',
                    align: 'center',
                    checkbox: true
                },
                {
                    field: 'name',
                    title: '类别名称',
                    width: 200
                }
            ]]
        });
    });

    // 打开新增商品类型对话框
    function addType() {
        $('#dlg_producttype').dialog('open').dialog('setTitle', '新增商品类别');
        $('#dg_producttype').form('clear');
        urls = 'type/addType';
    }

    // 保存商品类型信息
    function saveType() {
        $('#ff_producttype').form("submit", {
            url: urls, //使用参数
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success == 'true') {
                    $('#dg_producttype').datagrid("reload");
                    $('#dlg_producttype').dialog('close');
                }
                $.messager.show({
                    title: '提示信息',
                    msg: result.message
                });
            }
        });
    }

    // 打开修改商品类型对话框
    function editType() {
        var rows = $('#dg_producttype').datagrid('getSelections');
        if (rows.length > 0) {
            var row = $('#dg_producttype').datagrid('getSelected');
            if (row) {
                $('#dlg_producttype').dialog("open").dialog('setTitle', '修改商品类别');
                $('#ff_producttype').form('load', {
                    "name": row.name
                });
                urls = 'type/editType?id=' + row.id
            }
        } else {
            $.messager.alert('提示', '请选择要修改的行', 'info');
        }
    }

    // 删除商品类型及该类型下的所有商品
    function removeType() {
        var rows = $('#dg_producttype').datagrid('getSelections');
        if (rows.length > 0) {
            $.messager.confirm('Confirm', '删除商品类别会同时删除该类别下的所有商品，确定要删除类别么？', function (r) {
                if (r) {
                    var ids = "";
                    for (var i = 0; i < rows.length; i++) {
                        ids += rows[i].id + ",";
                    }
                    $.post('type/removeType', {
                        id: ids
                    }, function (result) {
                        if (result == 'true') {
                            $('#dg_producttype').datagrid('reload');
                            $.messager.show({
                                title: '提示信息',
                                msg: result.message
                            });
                        } else {
                            $.messager.show({
                                title: '提示信息',
                                msg: result.message
                            });
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请选择要删除的行', 'info');
        }
    }
</script>
</body>
</html>
